<template>
	<div class="profile">
		<div class="info">
			<div class="field">
				<span class="label">用户名：</span>
				<span>{{profile.name}}</span>
			</div>
			<div class="field">
				<span class="label">昵称：</span>
				<span v-if="!editing">{{ profile.nickname }}</span>
				<input v-else type="text" v-model="tempProfile.nickname" autofocus />
			</div>
			<div class="field">
				<span class="label">密码：</span>
				<span v-if="!editing">{{ profile.age }}</span>
				<input v-else type="number" v-model="tempProfile.age" />
			</div>
			<div class="field">
				<span class="label">上次在线时间：</span>
				<span>{{ profile.lasttimeonline }}</span>
			</div>
			<!-- 其他字段的展示和编辑逻辑类似，根据需求自行添加 -->
		</div>
		<button class="edit-button" @click="toggleEdit()">{{ editing ? '保存' : '编辑' }}</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				profile: {
					nickname: '王大锤',
					name: 'John Doe',
					age: 25,
					lasttimeonline: '2023-8-15'
					// 其他字段...
				},
				tempProfile: {}, // 用于暂存编辑中的个人资料
				editing: false // 标识是否处于编辑状态
			};
		},
		methods: {
			toggleEdit() {
				if (this.editing) {
					this.saveEdit();
				} else {
					// 进入编辑状态，将字段的值赋给tempProfile
					this.tempProfile = {
						...this.profile
					};
				}
				this.editing = !this.editing;
			},
			saveEdit() {
				// 保存编辑结果到profile
				this.profile = {
					...this.tempProfile
				};
			}
		}
	};
</script>

<style>
	.profile {
		padding: 20px;
	}

	.info {
		display: flex;
		flex-direction: column;
	}

	.field {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		height: 60rpx;
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;
		border-radius: 20rpx;
	}

	.label {
		font-weight: bold;
		margin-right: 10px;
	}

	input[type='text'],
	input[type='number'] {
		width: 200px;
		height: 30px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.edit-button {
		margin-top: 30rpx;
		padding: 4rpx;
		background-color: #00c8ff;
		color: white;
		border: none;
		border-radius: 30px;
		cursor: pointer;
	}

	.edit-button:hover {
		background-color: #00c8ff;
	}

	.edit-button:active {
		background-color: #00c8ff;
	}

	.edit-button:focus {
		outline: none;
	}
</style>